<template>
  <div :class="[prefixCls + '-topbar']">
    <div :class="[prefixCls + '-topbar-left']">
      <div class="date-wrap">
        <Input 
          placeholder="开始日期" 
          readonly 
          :value="startdate" 
        />
      </div>
      <div class="time-wrap">
        <Time-picker 
          :clearable="false" 
          confirm 
          placeholder="开始时间" 
          v-model="starttime"
          @on-change="handleStartTimeChange"
          @on-open-change="handleToggleTime"
        />
      </div>
    </div>
    <Icon type="ios-arrow-forward" size="20"></Icon>
    <div :class="[prefixCls + '-topbar-right']">
      <div class="date-wrap">
        <Input 
          placeholder="结束日期" 
          readonly 
          :value="enddate" 
        />
      </div>
      <div class="time-wrap">
        <Time-picker 
          :clearable="false" 
          confirm 
          placeholder="结束时间" 
          v-model="endtime"
          @on-change="handleEndTimeChange"
          :readonly="isRightTimePickerReadonly"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { DEFAULT_FORMATS, TYPE_VALUE_RESOLVER_MAP } from '../../util';
export default {
  props: ['prefixCls', 'dates'],
  data () {
    return {
      startdate: '',
      enddate: '',
      starttime: '',
      endtime: ''
    }
  },
  computed: {
    isRightTimePickerReadonly() {
      if (this.startdate === '' || this.enddate === '') return true;
      else return false;
    }
  },
  watch: {
    dates(val) {
      if (val instanceof Array) {
        this.formate(val, 'date')
        this.formate(val, 'time')
      }
    }
  },
  created() {
    this.formate(this.dates, 'date')
    this.formate(this.dates, 'time')
  },
  methods: {
    handleStartTimeChange(e) {
      const start = this.startdate + ' ' + e
      const end = this.enddate + ' ' + this.endtime
      this.$emit('update-topbar-time', [new Date(start), new Date(end)])
    },
    handleEndTimeChange(e) {
      const start = this.startdate + ' ' + this.starttime
      const end = this.enddate + ' ' + e
      this.$emit('update-topbar-time', [new Date(start), new Date(end)])
    },
    handleToggleTime(e) {
      if (e && (this.startdate === '' || !this.startdate)) {
        this.$emit('init-topbar-time')
      }
    },
    formate(val, type) {
      let f = DEFAULT_FORMATS[type]
      let val0 = val[0] ? TYPE_VALUE_RESOLVER_MAP[type].formatter(val[0], f) : ''
      let val1 = val[1] ? TYPE_VALUE_RESOLVER_MAP[type].formatter(val[1], f) : ''
      this[`start${type}`] = val0
      this[`end${type}`] = val1
    }
  }
}
</script>

<style>
.ivu-picker-panel-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ivu-picker-panel-container .ivu-picker-panel-content {
  flex: 1;
}

.ivu-picker-panel-container .ivu-picker-panel-content .ivu-date-picker-cells {
  flex: 1;
  width: 280px;
}

.ivu-picker-panel-container .ivu-date-picker-cells-header span {
  margin: 0;
  line-height: 40px;
}

.ivu-picker-panel-container .ivu-date-picker-cells span {
  width: 40px;
  height: 40px;
}

.ivu-picker-panel-container .ivu-date-picker-cells span em {
  width: 36px;
  height: 36px;
  line-height: 36px;
}

.ivu-picker-panel-topbar {
  width: 100%;
  height: 40px;
  /* background-color: aliceblue; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}

.ivu-picker-panel-topbar .ivu-picker-panel-body {
  min-width: auto;
}

.ivu-picker-panel-topbar-left {
  flex: 1;
  width: 280px;
  height: 100%;
  /* background-color: beige; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ivu-picker-panel-topbar-right {
  flex: 1;
  width: 280px;
  height: 100%;
  /* background-color: azure; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ivu-picker-panel-topbar .date-wrap {
  flex: 1;
  margin-right: 10px;
}

.ivu-picker-panel-topbar .time-wrap {
  flex: 1;
}
</style>